<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100%;
            height: 600px;
            /*background-color: gray;*/
            display: flex;
            justify-content: space-around;
            /*min-width: 500px;!*最小宽度  低于该宽度会显示滚动条*!*/
        }

        .box div {
            /*flex: auto;*/
            /*flex: 1 1 auto;*/
            /*flex: 1;*/
            /*flex: initial;*/
            /*flex: none;*/
            margin-right: 20px;
        }

        .box1 {
            background-color: pink;
            /*flex: 500px; 固定宽度*/
            flex: 0 0 20px;
        }

        .box2 {
            background-color: purple;
            /*flex: 1 500px;*/
            flex: 10 10 20px;
        }

        .box3 {
            background-color: greenyellow;
            flex: 20 20 20px;
        }

        .box4 {
            flex: 30 30 20px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
</body>
</html>